<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0; list-style:none;}
#one{border:1px solid #ccc; height:26px; line-height:26px;width:100px;margin:30px;}
#box{display:none;}
span{ cursor:pointer;}
</style>
<script>
window.onload=function(){
	var flag=true;
	var spans=document.getElementsByTagName('span')[0];
	var box=document.getElementById('box');
	spans.onclick=function(ev){
		var oEvent=ev||event;
		if(flag){
			box.style.display='block';	
			flag=false;
		}else{
			box.style.display='none';	
			flag=true;
		};
		oEvent.cancelBubble=true;
	};	
	document.onclick=function(){
		box.style.display='none';	
		flag=true;
	};
};
</script>
</head>

<body>
<div id="one">
	<span>我的百度</span>
    <ul id="box">
        <li>用户名：萨</li>
        <li>个人资料</li>
        <li>个人设置</li>
        <li>我的空间</li>
    </ul>
</div>
</body>
</html>
